import backgroundImg from '@/assets/img/category/bg.png';
import TopFooter from '@/components/TopFooter';
import type { ReactNode } from 'react';
import React, { memo, useEffect, useState } from 'react';
import { useNavigate } from 'umi';
import './index.less';
import { ftTag } from '@/service/modules/home';

interface Iprops {
  children?: ReactNode;
}
type Itag = {
  text: string;
  id: string;
};

const Categary: React.FC<Iprops> = (props) => {
  const navigate = useNavigate();

  const [tag, setTag] = useState<Itag[]>([]);
  // 随机背景色
  const randomColor = () => {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    return `rgb(${r},${g},${b})`;
  };

  const onTag = (e: Itag) => {
    navigate('/search', {
      state: {
        text: e.text,
        tagId: e.id,
      },
    });
  };

  useEffect(()=>{
    document.documentElement.scrollTop = 0;
    ftTag().then((res) => {
      const {
        code,
        data,
        message,
      } = res
      if(code === 200){        
      setTag(res.data.map((item: Itag)=>{
        const {id,text} = item
        return {
          id,text
        }
      }));

      }
    })
  }, [])

  return (
    <div className="category-page">
      <div className="cp-imgcover">
        <img src={backgroundImg} alt="backgroundImg" />
        <span className="cpi-title">分类</span>
      </div>
      <div className="cp-content wrapper-v2">
        {tag.map((item, index) => {
          return (
            <div
              className="cp-content-tag"
              style={{ backgroundColor: randomColor() }}
              key={index}
              onClick={() => onTag(item)}
            >
              {item.text}
            </div>
          );
        })}
      </div>
      <TopFooter></TopFooter>
    </div>
  );
};

export default memo(Categary);
